<template>
  <div class="home-box">
    <div class="home-tab">
					<ul class="nav nav-pills">
            <!-- 点击tab显示模态窗口 -->
						<li class="active"><a style="point-events:none">首页</a></li>
						<li ><a href="" data-toggle="modal" data-target="#noticeBox" onclick="return false">教学设施规模</a></li>
						<li ><a href="" data-toggle="modal" data-target="#departBox" onclick="return false">组织机构</a></li>
						<li ><a href="" data-toggle="modal" data-target="#rulesBox" onclick="return false">实验室管理员守则</a></li>
						<li ><a href="" data-toggle="modal" data-target="#inChargeBox" onclick="return false">负责人信息</a></li>
					</ul>
		</div>
		<div class="home-carousel">
			<carousel></carousel>
		</div>
		<div class="home-notice">
			<span class="glyphicon glyphicon-volume-up" style="font-size: 30px;color: #3278B3">
			</span>
			<span class="home-notice-title">
				通知公告
			</span>
		</div>
		<div class="home-notice-content">
      <br/>
      <div class="home-notice-list">
        <ul style="padding:5%">
          <li v-for="notice in notices" :key="notice.id" style="padding: 1%;margin: 2%;">
            <span style="font-weight: 800;">
              [公告]
            </span>
            &nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" @click="getDetailById(notice.id)">{{notice.title}}</a>
            &nbsp;&nbsp;&nbsp;{{notice.createtime}}
          </li>
        </ul>	
      </div>
      <div class="home-notice-cutLine"></div>
      <div class="home-notice-detail">
        <span class="home-notice-detail-title" id="noticeDetailTitle">
          {{noticeFirst.title}}
        </span><br><br>
        <p id="noticeDetailContent">
          {{noticeFirst.content}}
        </p>
        <span style="text-align:right;display:block">{{noticeFirst.createtime}}</span>
      </div>
      
	  </div>
    <!-- 实验室规模模态窗口 -->
		<div class="modal fade" id="noticeBox" role="dialog">
			<div class="modal-dialog" role="document" style="width: 30%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">教学设施规模</h4>
					</div>
					<div class="modal-body">
						<div style="position: relative; padding: 10px; ">
              <p style="word-break: break-word;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计算机综合实验室是经国
                家教委批准的全国计算机等级考试重点考点。
                现拥有计算机近<span class="font-sty">300</span>台,
                全部连通局域网、校园网,并已接入互联网。
                新建立组成接口实验室,拥有实验设备<span class="font-sty">64</span>台。
                计算机信息实验室专业实验技术人员有<span class="font-sty">10</span>名,
                其中高级工程师<span class="font-sty">3</span>名、
                工程师<span class="font-sty">3</span>名。
              </p>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
    <!-- 组织机构模态窗口 -->
    <div class="modal fade" id="departBox" role="dialog">
			<div class="modal-dialog" role="document" style="width: 30%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">组织机构</h4>
					</div>
					<div class="modal-body">
						<div style="position: relative; padding: 10px; ">
              <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                计算机综合实验室隶属于计算机学院，承揽专业课程的所有上机实验，
                包括 <span style="color:skyblue;font-size: 800;font-style: italic;">C 语言程序设计、编译原理、操作系统、多媒体计算机技术、汇
                编语言程序设计、计算机图形学、计算机网络技术、计算机科学引论、
                计算机组成原理、软件工程方法、数据库原理与设计、 Windows 程序设计、
                算法与数据结构、面向对象程序设计、接口与通讯技术、数据库原理与设计、
                数据库应用系统、网络营销、电子商务案例分析、 Java 语言程序设计、
                条码技术与应用、电子商务技术、电子商务、信息系统开发方法与实践</span>&nbsp;等课程。
                本实验室除了完成上机实验及教学任务外，还对外开放，接收学生自由上机和教师的科研工作。
              </p>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
    <!-- 实验室守则模态窗口 -->
    <div class="modal fade" id="rulesBox" role="dialog">
			<div class="modal-dialog" role="document" style="width: 30%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">实验室管理人员守则</h4>
					</div>
					<div class="modal-body">
						<div style="position: relative; padding: 10px; ">
              <p>
                1、实验室严禁吸烟吐痰、乱扔废弃物,注意保持整洁卫生。 坚持经 常清扫室内卫生。
              </p>
              <p>
                2、室内不准存放易燃物品,使用电热设备等须注意安全，按章使用，严禁无人操作。
              </p>
              <p>
                3、计算机等设备就位存放。 借用必须经主管同意，借出时应做好借 出记录；归还时应检查是否工作正常，附件是否齐全。
              </p>
              <p>
                4、用各种经费购买的设备必须建卡登记。 损坏丢失者,照价赔偿并追究责任。
              </p>
              <p>
                5、爱护计算机设备,严禁对计算机拆卸、改装,违者后果自负。
              </p>
              <p>
                6、应提前上岗,做好教学上课前的准备工作,在值班期间不能擅离工作岗位,认真负责。
              </p>
              <p>
                7、做好上机记录,有问题做到及时登记、查找原因并上报。
              </p>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
    <!-- 负责人信息 -->
    <div class="modal fade" id="inChargeBox" role="dialog">
			<div class="modal-dialog" role="document" style="width: 30%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">负责人信息</h4>
					</div>
					<div class="modal-body">
						<div style="position: relative; padding: 10px; ">
							称谓：<p>张老师</p><br>
							办公室：<p>莱芜校区-行政楼-3楼-301</p><br>
              办公室座机：<p>4610231</p><br>
              电话：<p>19819307585</p><br>
							邮箱：<p>acok@163.com</p><br>
							办公时间：<p>[夏季:08:00--18:00],[冬季:8:00--16:00]</p><br>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import $ from 'jquery';
import carousel from '@/components/carousel';
import { mapGetters, mapState } from 'vuex';
export default {
  name:'Home',
  components:{
    carousel
  },
  computed:{
    ...mapState('home',['notices']),
    ...mapGetters('home',['noticeFirst'])
  },
  methods:{
    getDetailById(noticeId){
      $.each(this.$store.state.home.notices,function(index,item){
        if(item.id===noticeId){
          $("#noticeDetailTitle").html(item.title);
          $("#noticeDetailContent").html(item.content);
        }
      })
    }
  },
  mounted(){
    this.$store.dispatch('home/getNotices');
  }
}
</script>

<style scoped lang="css">
  .home-box{
    position:inherit;
    top:0;
    height:100%;
    left:0;
    width:100%;
    overflow: auto;
  }
  .home-tab{
    font-size: 20px;
    position: inherit;
    left: 7%;
    top: 8%;
    width: 60%;
  }
  .home-carousel{
    position:inherit;
    top: 25%;
    left: 7%;
    width: 45%;
    height:65%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
  }
  .home-notice{
    position: inherit;
    top: 7%;
    left: 65%;
    height: 80%;
  }
  .home-notice-title{
    font-family:'新宋体';
    font-size: 30px;
    color: #3278B3
  }
  .home-notice-content{
    position: inherit;
    top: 15%;
    left: 65%;
    width: 32.5%;
    height: 75%;
    /* border: 5px dashed rgba(52,120,179,0.7); */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    /* overflow: auto; */
    border-radius: 10px;
  }
  .home-notice-list{
    height:55%;
    padding: 2%;
    overflow: auto;
  }
  .home-notice-cutLine{
    position:inherit;
    height:1px;
    width: 100%;
    border: 5px solid #3278B3;
  }
  .home-notice-detail{
    padding: 10px;
    margin-top: 5%;
    height: 35%;
    overflow: auto;
  }
  .home-notice-detail-title{
    font-size:20px;
    font-weight: 900;
    text-align: center;
    display: block;
  }
  .font-sty{
    color: skyblue;
    font-weight: 800;
    font-style: italic;
  }
  li{
    list-style: none;
    /* padding: 1%;
    margin: 2%; */
  }
  p{
    word-break: break-word;
  }
  a{
    font-size: 80%;
  }
</style>